<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Sensors List</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-12" style="padding: 1em">
        <map center="current-location" zoom="6" style="height: 40em">
        </map>
    </div>
</div>

<!--<pre>-->
    <!--{{ sensors | json }}-->
<!--</pre>-->

<div class="row" ng-if="!loading">

    <div class="col-lg-6">
        <div ng-repeat="sensor in sensors | filter : query">
            <div class="panel panel-info" ng-if="$even">
                <div class="panel-heading">
                    <a href="#/sensors/{{ sensor.properties.vs_name }}"
                       name="{{ sensor.properties.vs_name }}"
                       ng-bind="sensor.properties.vs_name"></a>
                    <div class="pull-right" ng-if="favorites.indexOf(sensor.properties.vs_name) > -1">
                        <i class="fa  fa-list-ul fa-fw"></i>
                    </div>
                </div>

                <div class="panel-body">
                    <p>
                        <b>Description:</b>
                        {{ sensor.properties.description }}
                    </p>

                    <p ng-if="sensor.properties.geographical">
                        <b> Location:</b>
                        {{ sensor.properties.geographical }}
                    </p>
                    <ul ng-if="sensor.geometry.coordinates">
                        <li ng-if="sensor.geometry.coordinates[0]">
                            <b>Latitude:</b>
                            {{ sensor.geometry.coordinates[0]}}
                        </li>
                        <li ng-if="sensor.geometry.coordinates[1]">
                            <b>Longitude:</b>
                            {{ sensor.geometry.coordinates[1]}}
                        </li>
                        <li ng-if="sensor.geometry.coordinates[2]">
                            <b>Altitude:</b>
                            {{ sensor.geometry.coordinates[2]}}
                        </li>
                    </ul>
                    <p>
                        <b>Protected:</b>
                        {{ sensor.properties.accessProtected }}
                    </p>

                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div ng-repeat="sensor in sensors | filter : query">
            <div class="panel panel-info" ng-if="$odd">
                <div class="panel-heading">
                    <a href="#/sensors/{{ sensor.properties.vs_name }}"
                       name="{{ sensor.properties.vs_name }}"
                       ng-bind="sensor.properties.vs_name"></a>
                    <div class="pull-right" ng-if="favorites.indexOf(sensor.properties.vs_name) > -1">
                        <i class="fa  fa-star fa-fw"></i>
                    </div>
                </div>

                <div class="panel-body">
                    <p>
                        <b>Description:</b>
                        {{ sensor.properties.description }}
                    </p>

                    <p ng-if="sensor.properties.geographical">
                        <b> Location:</b>
                        {{ sensor.properties.geographical }}
                    </p>
                    <ul ng-if="sensor.geometry.coordinates">
                        <li ng-if="sensor.geometry.coordinates[0]">
                            <b>Latitude:</b>
                            {{ sensor.geometry.coordinates[0]}}
                        </li>
                        <li ng-if="sensor.geometry.coordinates[1]">
                            <b>Longitude:</b>
                            {{ sensor.geometry.coordinates[1]}}
                        </li>
                        <li ng-if="sensor.geometry.coordinates[2]">
                            <b>Altitude:</b>
                            {{ sensor.geometry.coordinates[2]}}
                        </li>
                    </ul>
                    <p>
                        <b>Protected:</b>
                        {{ sensor.properties.accessProtected }}
                    </p>

                </div>

            </div>
        </div>

    </div>
</div>